<template>
  <a-drawer
    v-model:open="open"
    title="查看角色"
    placement="right"
    width="618"
    class="drawer"
  >
    <div class="container">
      <div class="item">
        <span class="label">角色名称：</span>
        <div class="content">
          <span tyle="margin-right: 5px">{{ formRole.roleName }}</span>
        </div>
      </div>
      <div class="item">
        <span class="label">角色描述：</span>
        <div class="content">
          <span style="margin-right: 5px">{{ formRole.roleDesc }}</span>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 9px">
      <span class="label">权限配置：</span>
    </div>
    <div class="table-content">
      <view-table :table-data="tableData" :loading="loading" />
    </div>
  </a-drawer>
</template>
<script setup>
import { ref, watch, reactive } from 'vue'
import { useVModel } from '@vueuse/core'
import { getRole } from '@/api/role.js'
import ViewTable from '../components/role-view-table.vue'
/**
 * 外部参数
 */
let props = defineProps({
  open: { type: Boolean, default: () => true },
  contextData: { type: Object, default: () => {} },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:open'])
/**
 * 双向绑定
 */
let open = useVModel(props, 'open', emit)
let tableData = ref([])
let formRole = reactive({
  roleName: undefined,
  roleDesc: undefined,
})
/**
 * 抽屉相关
 */
let loading = ref(false)
watch(
  () => props.contextData,
  contextData => {
    tableData.value = []
    formRole.roleDesc = contextData.roleDesc
    formRole.roleName = contextData.roleName
    loading.value = true
    if (contextData.roleId) {
      getRole(contextData.roleId)
        .then(res => {
          tableData.value = res?.data?.data
          loading.value = false
        })
        .catch(() => {
          loading.value = false
        })
    }
  },
  { deep: true, immediate: true },
)
</script>
<style lang="less" scoped>
.table-content {
  overflow-y: hidden;
}
.container {
  display: flex;
  flex-direction: column;
  font-family: PingFangSC-Regular;
  .item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 16px;
  }
}
.label {
  width: 70px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 1;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
}
</style>
